<template>
  <div>
    <van-nav-bar safe-area-inset-top placeholder :title="$t('alarmList')" fixed />
    <van-search v-model="invName" shape="round" background="#3B3D4E" :placeholder="$t('InverterSN')" @input="onSearch" />
    <van-tabs @click="selectAlarm">
      <van-tab title="Inverter Alarm">
        <van-list v-model="loading" :finished="finished" :loading-text="$t('Loading')" :finished-text="$t('noMore')" :error.sync="error" :error-text="$t('errorAndReload')" @load="onLoad">
          <div class="invListBox" v-for="(alarm,i) in alarmArr" :key="i">
            <div class="invList_t">
              <div class="invList_t_2">{{alarm.inverterSn}}</div>
              <div class="invList_t_3" @click="goDetail(alarm)">
                <van-icon name="info-o" />
              </div>
            </div>
            <div class="siteContentBox">
              <div class="siteContentList">
                <div class="siteContentList_l">{{$t('ErrorName')}}</div>
                <div class="siteContentList_r">{{alarm.errorMessage}}</div>
              </div>
              <div class="siteContentList">
                <div class="siteContentList_l">{{$t('RegistrationNo')}}</div>
                <div class="siteContentList_r">{{alarm.wsn}}</div>
              </div>
              <div class="siteContentList">
                <div class="siteContentList_l">{{$t('HappenTime')}}</div>
                <div class="siteContentList_r">{{alarm.timeStringVal}}</div>
              </div>
              <div class="siteContentList">
                <div class="siteContentList_l">{{$t('RecoveryTime')}}</div>
                <div class="siteContentList_r">{{alarm.recoveryTime}}</div>
              </div>
              <div class="siteContentList">
                <div class="siteContentList_l">{{$t('SiteName')}}</div>
                <div class="siteContentList_r">{{alarm.siteName}}</div>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="Other Alarm">
        <div class="invListBox" v-for="(alarm,i) in EValarmArr" :key="i">
          <div class="invList_t">
            <div class="invList_t_2">{{alarm.pileSn}}</div>
          </div>
          <div class="siteContentBox">
            <div class="siteContentList">
              <div class="siteContentList_l">{{$t('ErrorName')}}</div>
              <div class="siteContentList_r">{{alarm.errorMessage}}</div>
            </div>
            <div class="siteContentList">
              <div class="siteContentList_l">{{$t('HappenTime')}}</div>
              <div class="siteContentList_r">{{alarm.exportReportStartTime}}</div>
            </div>
            <div class="siteContentList">
              <div class="siteContentList_l">{{$t('RecoveryTime')}}</div>
              <div class="siteContentList_r">{{alarm.exportRecoveryTime}}</div>
            </div>
            <div class="siteContentList">
              <div class="siteContentList_l">{{$t('SiteName')}}</div>
              <div class="siteContentList_r">{{alarm.siteName}}</div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data(){
    return {
      invName:'',
      EVName:'',
      loading: false,
      finished: false,
      alarmArr:[],
      EValarmArr:[],
      current:0,
      error:false
    }
  },
  methods: {
    goDetail(alarmDetail){
      this.$router.push({path:'/alarmProposal',query:{'deviceType':alarmDetail.deviceType,'alarmName':alarmDetail.errorMessage}});
    },
    selectAlarm(name){
      console.log(name);
      this.getEVAlarmList();
    },
    async getAlarmList(){
      this.comm.loadingShow();
      let data=await this.API.alarmList(localStorage.getItem('domain'),{'tokenId':localStorage.getItem('tokenId'),'current':this.current,'size':10,'inverterSn':this.invName});
      this.alarmArr = this.alarmArr.concat(data.result?.rows);
      this.loading = false;
      if (data.result?.rows==null||data.result?.rows.length==0||data.result?.rows.length<10) {
        this.finished=true;
      }else{
        this.finished = false;
      }
      this.current++;
    },
    async getEVAlarmList(){
      this.comm.loadingShow();
      let datas=await this.API.getChargerAlarm(localStorage.getItem('domain'),{'tokenId':localStorage.getItem('tokenId'),'inverterSn':this.EVName});
      this.EValarmArr=datas;
    },
    onLoad(){
      this.getAlarmList().catch(()=>{
        this.loading=false;
        this.error=true;
      });
    },
    onSearch(){
      this.current=1;
      this.alarmArr = [];
      this.getAlarmList();
    }
  }
}
</script>

<style scoped lang="less">
.van-hairline--bottom::after{
  border: none;
}
.invListBox{
  width: 100%;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  margin-top: 15px;
  background: #FFFFFF;
}
.invList_t{
  width: 100%;
  height: 45px;
  border-bottom: 1px dotted #e2e2e2;
  color: #323544;
}
.invList_t_2{
  float: left;
  height: 45px;
  line-height: 45px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: bolder;
  margin-left: 15px;
}
.invList_t_3{
  float: right;
  padding-top: 10px;
  margin-right: 15px;
}
.invList_t_3 i{
  font-size: 28px;
  color:#595758 ;
}
.siteContentBox{
 padding: 0 15px;
}
.siteContentList{
  height: 30px;
  line-height: 30px;
  width: 100%;
}
.siteContentList_l{
  float: left;
  color: #B6B6B6;
}
.siteContentList_r{
  float: right;
  color: #444444;
}
.van-search__action{
  color: #fff;
}
.van-search__action:active{
  background-color: #3B3D4E;
}
</style>
